<template>
  <div >
   <div>

   </div>
    <hr>
    <div>

      <!-- 1设置容器 -->
      <div id="chart" style="width: 600px; height: 400px;"></div>
   </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
import {getNum} from "@/api/set_worker";
export default {

  data() {
    return {


    }
  },
  methods: {
    //初始化Echarts
    initChart() {
      // 2初始化
      const chart = echarts.init(document.getElementById('chart'))

      // 3 配置
      getNum().then(res => {
        console.log("res=========",res)

        const options = {
          title: {
            text: '系统员工状态比例图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['状态']
          },
          xAxis: {
            type: 'category',
            data: res.data.category    // 从后端获得x轴展示内容
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '状态',
              type: 'bar',
              data: res.data.value  // 从后端获得x轴展示数据
            }
          ]
        }
        // 使用图表配置
        chart.setOption(options)
      })
    }
  },
  //初始化Echarts
  mounted() {
    this.initChart()
  },
}
</script>

